<template>
	<view>
		<l-echart ref="chart" @finished="init" :id="id"></l-echart>
	</view>
</template>

<script>
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	import * as echarts from 'echarts'
	export default {
		props: {
			id: {
				type: String,
				default: 'Echart',
			},
			options: {
				type: Object,
				default: () => ({}),
			},
		},
		components: {
			LEchart
		},
		data() {
			return {
				option: {},
			}
		},
		mounted() {
			const value = this.options.value;
			const rate = Math.round(value * 100 / 1000);
			
			var data = {
				backgroundColor: this.options.backgroundColor,
				polar: {
					center: ["50%", "50%"],
					radius: ["50%", "80%"],
				},
				angleAxis: {
					max: 100,
					show: false,
				},
				radiusAxis: {
					type: "category",
					show: true,
					axisLabel: {
						show: false,
					},
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
				},
				series: [{
					data: [value],
					name: "",
					type: "bar",
					roundCap: true,
					showBackground: true,
					backgroundStyle: {
						color: this.options.colorbg,
					},
					coordinateSystem: "polar",
					itemStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: this.options.color1,
								},
								{
									offset: 1,
									color: this.options.color2,
								},
							]),
						},
					},
				}, ],
			}
			this.option = data
		},
		methods: {
			async init() {
				const chart = await this.$refs.chart.init(echarts);
				chart.setOption(this.option);
			},
		},
	};
</script>

<style scoped>
	
</style>